<template>
      <span></span>
      <el-text class="mx-1" type="danger" tag="b" style="margin-left: 42%; font-size: 20px; font-family: Microsoft YaHei;">学生个人详情<el-icon><EditPen /></el-icon></el-text>
      <br/>
      <br/>
    <el-row :gutter="20">
      
        <el-col :span="16">
    <el-space class="alignment-container" v-show="showSearch">
    <el-text class="mx-1"><el-avatar :size="50" :src="studentinfo.avatar"/></el-text>
    <el-text class="mx-1"><b>姓名：</b>{{studentinfo.nickname}}</el-text>
    <el-text class="mx-1"><b>性别：</b><span v-if="studentinfo.sex == 0">男</span><span v-else>女</span></el-text>
     <el-text class="mx-1"><b>学号：</b>{{studentinfo.studentId}}</el-text>
     <el-text class="mx-1"><b>注册时间：</b>{{ caseTime(studentinfo.createTime) }}</el-text>
     <el-text class="mx-1"><b>编辑时间：</b>{{ caseTime(studentinfo.updateTime) }}</el-text>
    </el-space>
     <!-- </el-card> -->

    </el-col>
    <el-col :span="6">
        <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
                 v-if="search">
                 <el-button circle icon="Search" @click="toggleSearch()" />
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="刷新" placement="top">
               <el-button circle icon="Refresh" @click="refresh()"/>
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="返回" placement="top">
               <el-button circle icon="Back" @click="back_down()"/>
               </el-tooltip>
    </el-col>     
  </el-row>
 
     <!-- 列表查询 -->
     <el-table v-loading="loading" :data="classList"  @selection-change="handleSelectionChange" :header-cell-style="{ background: '#eee', color: '#909399' }">
               <template #empty v-if="classList.length == 0">
                <el-empty description="暂时还没有考试信息哦~" />
              </template>
                <el-table-column label="编号" align="center" key="id" prop="id" />
                <el-table-column label="考试名称" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
                <el-table-column label="总分：" align="center" key="scope" prop="scope" :show-overflow-tooltip="true" />
                <el-table-column label="开始时间：" align="center" key="beginTime" prop="beginTime" :show-overflow-tooltip="true" />
                <el-table-column label="结束时间：" align="center" key="endTime" prop="endTime" :show-overflow-tooltip="true"/>
                <el-table-column label="操作" align="center" width="110" class-name="small-padding fixed-width">
                   <template #default="scope">
                      <el-tooltip content="详情" placement="top" v-if="scope.row.userId !== 1">
                         <el-button link type="primary" icon="Search" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
                      </el-tooltip>
                   </template>
                </el-table-column>
             </el-table>
     <!-- 查看题目 -->
  <el-dialog v-model="dialogVisible" title="" width="800" :before-close="handleClose" :fullscreen="true" v-loading="loading" :show-close="false">
   <div style="position: absolute;top: 0%; width: 98%;" v-loading="loading">
    <div style="height: 80px; width: 99%;background: #F2F6FC;">
       <div id="countdown" style="position: relative; top:40%;margin-left: 16.5%;"><el-text tag="b" size="large">
         考试名称：</el-text>{{student_info.name}}&nbsp;&nbsp;&nbsp;<el-text tag="b" size="large">
         学生姓名：</el-text>{{studentinfo.nickname}}&nbsp;&nbsp;&nbsp;<el-text tag="b" size="large">
         考试分数：</el-text>{{student_info.scope}}&nbsp;&nbsp;&nbsp;
      </div>  
         <el-check-tag checked @click="dialogVisible = false" size="25" style="position: relative; left: 79%;" type="primary"><el-icon><ArrowLeft /></el-icon>返回</el-check-tag>
    </div>
   <div style="margin-left: 16%; margin-top: 2%;" >
   <div ref="containerRef" style="width: 60%;height: 660px;display: inline-block;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;">
        <span id="part0"></span>
        <el-card :id="'part' + (item.id)" v-for="(item, index) in optionsQuestion"
           :body-style="{ padding: item.typeId == 3 || item.typeId == 4 ? '0px' : '20px' }"
           style="margin-bottom: 15px;">
           <template #header>
              <div class="card-header">
                 <span style="display: inline-block;width: 90%;">{{index+1+". "+ item.question.split("/")[0]}}</span>
                 <span style="position: relative;right: 0px;">{{ "( "+(item.typeId==1?'单选题':item.typeId==2?'多选题':item.typeId==3?'判断题':item.typeId==4?'简答题':null)+" )" }}</span>
               </div>
           </template>
           <p style="margin-top: 10px;" v-if="item.typeId == 1"
              :style="{ color: item.stuAnswer == item.answerTxt ? 'BLACK' : 'BLACK'}"
              v-for="(text, i) in item.question.split('/')[1].split('_')" class="text item">{{ text }}</p>
           <p v-if="item.typeId == 2" :style="{ color: getColor(item.answerTxt, i) ? 'black' : 'black' }"
              v-for="(text, i) in item.question.split('/')[1].split('_')" class="text item">{{ text }}</p>
           <template #footer>
           <div > 正确答案：{{item.answerTxt}}</div>
            &nbsp;&nbsp;&nbsp;
           <div :style="{ color: item.stuAnswer == item.answerTxt ? 'BLACK' : 'red'}"> 学生答案：{{item.stuAnswer}}</div>
         </template>
        </el-card>
     </div>
     <div
        style="width: 20%;display: inline-block;height: 635px;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;overflow: scroll;">
        <el-anchor style="height: 600px;" :container="containerRef" direction="vertical" type="horizontal" :offset="238" :bound="238"
            @click="handleClick">
            <el-anchor-link v-for="(item, index) in optionsQuestion" style="size: 20px;" :href="'#part' + item.id"
           >
                <span :style="{ color: item.stuAnswer == item.answerTxt ? '#73767a' : '#c45656'}">{{index + 1 + '.' + item.question.split('/')[0]}}</span>
               </el-anchor-link>
        </el-anchor>
    </div>
     </div>
   </div>
  </el-dialog>
</template>
<script setup>
import { useStudentStore1 } from "@/store/studentInfo";
import { getStudentExam } from "@/api/teacher/class/teacher_class";
import { adminQuestionBySubjectId } from "@/api/user/historyExamination/HistoryExamination_api.js"
import { ref } from "vue";
import router from "@/router";
let studentinfo=useStudentStore1().studentInfo
const classList = ref([]) //查询所有
const optionsQuestion = ref([])
const dialogVisible = ref(false)
const loading =ref(true)
const showSearch = ref(true); //动态隐藏
//通过学生id查看最近考试情况

function findStudentInfo(){
    loading.value=true
    getStudentExam(studentinfo.userId).then(res=>{
        loading.value=false
      if(res.data.code == 200){
        classList.value=res.data.obj
        classList.value.forEach(element => {
            if(element.beginTime != null){
                element.beginTime=caseTime(element.beginTime)
            }
            if(element.endTime != null){
                element.endTime=caseTime(element.endTime)
            }
        });
      }
    })
}


const student_info=ref({})
/**根据课程id查找对应的题目信息 */
function handleUpdate(row){
  student_info.value=row
  loading.value=true
  dialogVisible.value = true
  adminQuestionBySubjectId(studentinfo.userId,row.id).then(res => {
   loading.value=false
     if (res.data.code == 200) {
        optionsQuestion.value = res.data.obj
        CaseStr(res.data.obj)
     }
  })
}

/**将字符串数组转换为字符串 */
function CaseStr(list){
   let match='' 
   list.forEach(element => {
      if(element.stuAnswer != "[]"){
      match =element.stuAnswer.match(/\[([^\]]+)\]/); // 匹配方括号内的内容 
      element.stuAnswer=match[1]
      }else{
       element.stuAnswer=''
      }
   });
}

const getColor = (text, i) => {
  var boo = false
  text.split("").forEach(element => {
     if (element == "A" && i == 0 || element == "B" && i == 1 || element == "C" && i == 2 || element == "D" && i == 3) {
        boo = true
     }
  });
  return boo
}

/**学生试卷详情 */
function handleDelete(row){
    
}

const props = defineProps({
   /* 是否显示检索条件 */
   showSearch: {
      type: Boolean,
      default: true,
   },
   /* 显隐列信息 */
   columns: {
      type: Array,
   },
   /* 是否显示检索图标 */
   search: {
      type: Boolean,
      default: true,
   },
   /* 显隐列类型（transfer穿梭框、checkbox复选框） */
   showColumnsType: {
      type: String,
      default: "checkbox",
   },
   /* 右外边距 */
   gutter: {
      type: Number,
      default: 10,
   },
})
const emits = defineEmits(['update:showSearch', 'queryTable']);
// 搜索
function toggleSearch() {
  if (showSearch.value == true) {
     showSearch.value = false
  } else {
     showSearch.value = true
  }
  emits("update:showSearch", !props.showSearch);
}
// 刷新
function refresh() {
  findStudentInfo()
}
findStudentInfo()


function back_down(){
   router.go(-1)
}


/**时间转换 */
function caseTime(date){
    let time=new Date(date);
    let year=time.getFullYear();
    let month=time.getMonth()+1;
    let day=time.getDate()+1;
    let hours=time.getHours();
    let minutes=time.getMinutes();
    if(month<=9){
        month='0'+month
    }

    if(day<=9){
       day='0'+day
    }

    if(hours<=9){
      hours='0'+hours
    }
    if(minutes<=9){
      minutes='0'+minutes
    }
    return year+"-"+month+"-"+day+" "+hours+":"+minutes;
}
</script>